<!DOCTYPE HTML>
<html lang="es-CO">
<head>
	<meta charset="UTF-8">
	<title>canvas</title>
</head>
<body>
	<canvas id="canvas" style="position:relative; margin: 50px 100px; border: 1px solid black"></canvas>
	
	<script src="Class.js" type="text/javascript" charset="utf-8"></script>
	<script src="events.js" type="text/javascript" charset="utf-8"></script>
	<script src="Shape.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		cv = document.getElementById('canvas');
		
		c = Cevent(cv);
		
		var pat = c.rect(50, 100, 30, 5)
		.keydown('left', function(){ pat.x -= 2 })
		.keydown('right', function(){ pat.x += 2 })
		.keydown('up', function(){ pat.y -= 2 })
		.keydown('down', function(){ pat.y += 2 })
		.draw().get();
		
	</script>
</body>
</html>
